<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div class="wrapper">
      <SketchRule
        :lang="lang"
        :thick="thick"
        :scale="scale"
        :width="biaochiw"
        :height="biaochih"
        :startX="startX"
        :startY="startY"
        :shadow="shadow"
        :horLineArr="lines.h"
        :verLineArr="lines.v"
        :cornerActive="true"
        @handleLine="handleLine"
        @onCornerClick="handleCornerClick"
      >
      </SketchRule>
      <div
        ref="screensRef"
        id="screens"
        @wheel="handleWheel"
        @scroll="handleScroll"
      >
        <div ref="containerRef" class="screen-container" :style="scStyle">
          <div id="canvas" :style="canvasStyle">
            <editerpannel />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
// import SketchRule from "./sketchRuler.vue";
import SketchRule from "../../components/sr/src";
// import SketchRule from "vue-sketch-ruler";
const rectWidth = 1000;
const rectHeight = 1000;

let cw = 3840;
let ch = 1080;

import editerpannel from "./editerpannel";

export default Vue.extend({
  data() {
    return {
      scale: 0.3, //658813476562495, //1,
      startX: 0,
      startY: 0,
      lines: {
        h: [],
        v: [],
      },
      thick: 20,
      lang: "zh-CN", // 中英文
      isShowRuler: true, // 显示标尺
      isShowReferLine: true, // 显示参考线
      biaochih: 5000,
      biaochiw: 5000,
      sol: 0,
      sot: 0,
      isclick: false,
      cw: 1920,
      ch: 1080,
      // cw: 3840,
      // ch: 1080,
    };
  },
  components: {
    SketchRule,
    editerpannel,
  },
  computed: {
    shadow() {
      return {
        x: 0,
        y: 0,
        width: rectWidth,
        height: rectHeight,
      };
    },
    canvasStyle() {
      return {
        transform: `scale(${this.scale})`,
        width: this.cw + 'px',
        height: this.ch + 'px',
      };
    },
    scStyle() {
      return {
        width: this.cw * 1.1 + 'px',
        height: this.ch * 1.1 + 'px',
      };
    },
  },
  methods: {
    _onMouseMove(e) {
      // console.log(this.$refs.screensRef.scrollLeft);
      // console.log(this.$refs.screensRef.scrollTop);
      if (e.ctrlKey && this.isclick) {
        e.preventDefault();
        // console.log(this.$refs.screensRef.scrollLeft);
        // console.log(this.$refs.screensRef.scrollTop);
        // console.log(this.$refs.screensRef);

        if (this.sol != 0) {
          let ol = e.clientX - this.sol;
          // if (Math.abs(ol) < 100) {
          this.$refs.screensRef.scrollLeft -= ol;
          // }
          this.sol = e.clientX;
        } else {
          this.sol = e.clientX;
        }

        if (this.sot != 0) {
          let ot = e.clientY - this.sot;
          // if (Math.abs(ot) < 100) {
          this.$refs.screensRef.scrollTop -= ot;
          // }
          this.sot = e.clientY;
        } else {
          this.sot = e.clientY;
        }
      }
      // this.$nextTick(() => {
      //   this.handleScroll();
      // });
    },
    handleLine(lines) {
      this.lines = lines;
    },
    handleCornerClick() {
      return;
    },
    handleScroll() {
      const screensRect = document
        .querySelector("#screens")
        .getBoundingClientRect();
      const canvasRect = document
        .querySelector("#canvas")
        .getBoundingClientRect();

      // 标尺开始的刻度
      const startX =
        (screensRect.left + this.thick - canvasRect.left) / this.scale;
      const startY =
        (screensRect.top + this.thick - canvasRect.top) / this.scale;
      // console.log(startX, startY);

      // this.startX = 200;
      // this.startY = 200;
      this.startX = startX;
      this.startY = startY;
    },
    // 控制缩放值
    handleWheel(e) {
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        const nextScale = parseFloat(
          Math.max(0.2, this.scale - e.deltaY / 1000).toFixed(2)
        );
        this.scale = nextScale;
      }
      this.$nextTick(() => {
        this.handleScroll();
      });
    },
  },
  mounted() {
    document.addEventListener("mousemove", this._onMouseMove, false);
    document.addEventListener(
      "mousedown",
      () => {
        this.isclick = true;
      },
      false
    );
    document.addEventListener(
      "mouseup",
      () => {
        this.isclick = false;
        this.sol = 0;
        this.sot = 0;
      },
      false
    );

    this.scale = this.$refs.screensRef.getBoundingClientRect().width / this.cw * 0.9



    console.log(this.scale);
    console.log(this.$refs.containerRef.getBoundingClientRect());
    console.log(this.$refs.screensRef.getBoundingClientRect());

    // 滚动居中
    this.$refs.screensRef.scrollLeft = (this.$refs.containerRef.getBoundingClientRect().width * (1-this.scale)) / 2 * 0.6
    this.$refs.screensRef.scrollTop =
      ((this.$refs.screensRef.getBoundingClientRect().height * (1-this.scale)) / 2 * 0.7) 

    this.biaochiw = this.$refs.screensRef.getBoundingClientRect().width - 18;
    this.biaochih = this.$refs.screensRef.getBoundingClientRect().height - 18;

  },
});
</script>
<style lang="less">
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(144, 146, 152, 0.644);
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden;
}

body * {
  box-sizing: border-box;
  user-select: none;
}

.wrapper {
  background-color: #f5f5f5;
  // position: absolute;
  // top: 0px;
  // left: 0px;
  // width: 1500px;
  // height: 500px;
  width: 100%;
  height: 100%;
  border: 1px solid #dadadc;
}

#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.screen-container {
  // width: 100%;
  // height: 100%;
  // position: absolute;
  // width: 4500px;
  // height: 1500px;
}

.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}

.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}

.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}
.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}

#canvas {
  position: absolute;
  // top: 80px;
  // left: 50%;
  // margin-left: -80px;
  background: #08244C;
  // transform-origin: 50% 0;
}
</style>